<script setup>
  import { onMounted, ref } from 'vue'
  import { getOrderDocListApi } from '@/server/order'
  import { date } from '../../uni_modules/uview-plus/libs/function/test'
  import _ from 'lodash'

  const props = defineProps({
    type: {
      type: Number,
      default: 1,
    },
  })

  // // 页码
  const pageCurrent = ref(1)

  // // 页数
  const pageSize = ref(10)

  // // 获取数据
  const orderList = ref([])

  // 是否继续获取数据
  const isMore = ref('more')

  const getOrderList = _.debounce(async () => {
    if (isMore.value === 'noMore') return
    isMore.value = 'loading'
    const { data } = await getOrderDocListApi({
      current: pageCurrent.value,
      pageSize: pageSize.value,
      type: props.type,
    })

    orderList.value = [...orderList.value, ...data.data.rows]

    refresherTriggered.value = false

    if (pageCurrent.value <= data.data.pageTotal) {
      isMore.value = 'more'
    } else {
      isMore.value = 'noMore'
    }
  }, 800)

  getOrderList()

  // 下拉刷新
  const refresherTriggered = ref(false)

  // 滑动到底部触发
  function onScrollBottom() {
    pageCurrent.value += 1
    getOrderList()
  }

  // 上拉刷新
  function onrefreshfn() {
    refresherTriggered.value = true
    pageCurrent.value = 1
    orderList.value = []
    getOrderList()
  }
</script>

<template>
  <scroll-view
    refresher-enabled
    refresher-background="#f6f6f6"
    :refresher-triggered="refresherTriggered"
    class="uni-scroll-view"
    @refresherrefresh="onrefreshfn"
    @scrolltolower="onScrollBottom"
    scroll-y
  >
    <view class="consult-list">
      <view class="consult-list-item" v-for="item in orderList" :key="item.id">
        <view class="consult-header">
          <view class="label">
            <image
              class="doctor-avatar"
              src="/static/uploads/doctor-avatar.jpg"
            />
            <text>{{ item.docInfo.name }}</text>
          </view>
          <text v-if="item.status === 1" class="status color-1">待支付</text>
          <text v-if="item.status === 2" class="status color-2">待接诊</text>
          <text v-if="item.status === 3" class="status color-2">咨询中</text>
          <text v-if="item.status === 4" class="status color-3">已完成</text>
          <text v-if="item.status === 5" class="status color-3">已取消</text>
        </view>
        <navigator class="consult-body" hover-class="none">
          <uni-list :border="false">
            <uni-list-item
              :border="false"
              title="病情描述"
              :right-text="item.illnessDesc"
            />
            <uni-list-item
              :border="false"
              title="价格"
              :right-text="`¥ ${item.payment}`"
            />
            <uni-list-item
              :border="false"
              title="创建时间"
              :right-text="item.createTime"
            />
          </uni-list>
        </navigator>

        <view class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button">继续支付</button>
        </view>
      </view>

      <!-- 加载状态 -->
      <uni-load-more
        :status="isMore"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './styles.scss';
</style>
